import ErrorBoundary from '@/components/ErrorBoundary'
import BasicLayout from '@/layouts/BasicLayout'
import { Spin } from 'antd'
import { Suspense, lazy } from 'react'
import type { NonIndexRouteObject } from 'react-router-dom'
import { Outlet, createBrowserRouter } from 'react-router-dom'

function lazyLoadFn(LazyComponent: ReturnType<typeof lazy>) {
  return (
    <Suspense
      fallback={
        <div>
          <Spin spinning={true}>组件加载中...</Spin>
        </div>
      }
    >
      <LazyComponent />
    </Suspense>
  )
}

export interface IRouteItem extends Omit<NonIndexRouteObject, 'children' | 'element'> {
  key: string
  label?: string
  icon?: React.ReactNode
  children?: IRouteItem[]
  element: React.ReactNode //React.LazyExoticComponent<any> |
  hidden?: boolean
}

const routerChildren: IRouteItem[] = [
  {
    path: 'secure',
    key: 'secure',
    label: '安全共治',
    hidden: false,
    errorElement: <ErrorBoundary />,
    element: <Outlet />,
    children: [
      {
        path: 'pea',
        key: 'pea',
        label: '政企协',
        hidden: false,
        element: lazyLoadFn(
          lazy(() => import(/* webpackChunkName: "page1" */ '@/pages/secure/pea')), // 懒加载的会单独打包成chunk,但不会在inde.html script标签中引入
        ),
      },
      {
        path: 'dailyLearning',
        key: 'dailyLearning',
        label: '每日一学',
        hidden: false,
        element: lazyLoadFn(
          lazy(() => import(/* webpackChunkName: "page1" */ '@/pages/secure/dailyLearning')), // 懒加载的会单独打包成chunk,但不会在inde.html script标签中引入
        ),
      },
    ],
  },
]

const basicRoutes: IRouteItem[] = [
  {
    path: '/',
    key: '/',
    element: <BasicLayout />,
    errorElement: <ErrorBoundary />,
    children: routerChildren,
  },
]

const basicRouter = createBrowserRouter(basicRoutes, {
  basename: process.env.processEnvDetail.REACT_APP_routerBaseName,
})

export { basicRouter, routerChildren }
